<template>
  <!-- 页面整体布局外层容器 -->
  <div class="flex flex-wrap gap-4">
    <el-card style="font-size: 15px;font-weight: bold;margin-bottom: 10px" shadow="always"><span style="color: #535bf2">|</span>品牌页</el-card>
  </div>
  <div class="brandList" style="padding-top: 30px">
    <!-- 搜索品牌相关的表单 -->
    <el-form style="margin-left: 15px " :inline="true" :model="brandSearchQuery">
<!--      <el-form-item label="请选择品牌：">-->
<!--        <el-select style="width: 150px"-->
<!--                   v-model="brandSearchQuery.brandId"-->
<!--                   placeholder="请选择品牌"-->
<!--                   @click="loadBrandOptions"-->
<!--                   clearable>-->
<!--          <el-option-->
<!--              v-for="item in brandOptions"-->
<!--              :key="item.brandId"-->
<!--              :label="item.brandName"-->
<!--              :value="item.brandId"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
    </el-form>
    <!-- 添加品牌按钮 -->
    <el-button style="margin-left: 15px;" type="primary" @click="addView">添加品牌</el-button>
    <!-- 批量删除按钮，点击触发 batchDel 方法来执行批量删除操作，根据选中的品牌 ID 进行删除 -->
    <el-button type="danger" @click="batchDel">批量删除</el-button>
    <!-- 品牌列表展示表格 -->
    <el-table
        :data="brandList"
        style="width: auto"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" show-overflow-tooltip/>
      <el-table-column type="index" label="序号" width="200" show-overflow-tooltip/>
      <el-table-column prop="brandName" label="品牌名称" width="400" show-overflow-tooltip/>
      <el-table-column prop="brandType" label="品牌类型" width="500" show-overflow-tooltip></el-table-column>
      <el-table-column prop="brandImg" label="品牌图片" width="500" show-overflow-tooltip>
        <template #default="scope">
          <!-- 这里修改为直接使用img标签展示图片，添加适当的样式类用于后续样式调整 -->
          <img :src="scope.row.brandImg" alt="品牌图片" class="brand-img">
        </template>
      </el-table-column>
      <el-table-column style="" label="操作" width="500">
        <template #default="scope">
          <!-- 查看品牌详情按钮，点击根据品牌 ID 查询并展示详情，调用 view 方法 -->
          <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
          <!-- 编辑品牌按钮，点击根据品牌 ID 查询并打开编辑弹窗，调用 editView 方法 -->
          <el-button type="success" @click="editView(scope.row.id)">编辑</el-button>
          <!-- 删除单个品牌按钮，点击根据品牌 ID 删除品牌，调用 delBrand 方法 -->
          <el-button type="danger" @click="delBrand(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination style="justify-content: center;margin-top: 10px"
                   background
                   layout="prev, pager,next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="toPage"
                   @prev-click="toPage"
                   @next-click="toPage"
    />
    <!-- 添加品牌弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        width="1000px"
        :title="brandQuery.id!=null? '品牌详情' : '新增品牌'"
        :draggable="true"
        center
    >
      <el-form ref="addRefForm" :model="brandQuery" label-width="auto"  style="max-width: 800px">
        <el-form-item v-if="brandQuery.id!=null" label="品牌ID：" prop="id">
          <span class="detail">{{ brandQuery.id }}</span>
        </el-form-item>
        <el-form-item label="品牌名称：" prop="brandName">
          <el-input v-if="brandQuery.id == null" v-model="brandQuery.brandName" placeholder="请输入品牌名称"/>
          <span class="detail" v-else>{{ brandQuery.brandName }}</span>
        </el-form-item>
        <el-form-item label="品牌类型：" prop="brandType">
          <el-input v-if="brandQuery.id == null" v-model="brandQuery.brandType" placeholder="请输入品牌类型"/>
          <span class="detail" v-else>{{ brandQuery.brandImg }}</span>
        </el-form-item>
        <el-form-item label="品牌图片：" prop="brandImg">
          <el-upload
              v-if="brandQuery.id == null"
              v-model="brandQuery.brandImg"
              list-type="picture-card"
              action="http://localhost:8080/upload"
              multiple
              :limit="3"
              :on-success="handleAvatarSuccess"
          >
          </el-upload>
          <span class="detail" v-else>
        <img :src="brandQuery.brandImg" alt="品牌图片" class="brand-img">
      </span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="brandQuery.id==null" type="primary" @click="addBrandSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑品牌弹窗 -->
    <el-dialog v-model="editDialogVisible" width="1000px" draggable="true" center>
      <el-form ref="addRefForm" :model="editBrandQuery" label-width="auto" style="max-width: 800px">
        <el-form-item label="id：" prop="id">
          <span class="detail">{{ editBrandQuery.id }}</span>
        </el-form-item>
        <el-form-item label="品牌名称：" prop="brandName">
          <el-input v-model="editBrandQuery.brandName"/>
        </el-form-item>
        <el-form-item label="品牌类型：" prop="brandType">
          <el-input v-model="editBrandQuery.brandType"/>
        </el-form-item>
        <el-form-item label="品牌图片：">
          <el-upload
              v-model="editBrandQuery.brandImg"
              :src="editBrandQuery.brandImg"
              list-type="picture-card"
              action="http://localhost:8080/upload"
              multiple
              :limit="3"
              :on-success="handleAvatarSuccess"
          >
            <el-image
                style="width: 100px; height: 100px"
                :src="editBrandQuery.brandImg"
            ></el-image>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editBrandSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";
import qs from "qs";

export default {
  name: "BrandView",
  inject: ['reload'],
  data() {
    return {
      brandList: [], // 存储品牌列表数据
      dialogVisible: false, // 控制添加/编辑品牌弹窗的显示隐藏
      brandQuery: {
        brandImg: ''  // 用于存储品牌图片相关信息
      },
      pageSize: 0, // 每页展示的品牌数据条数
      total: 0, // 品牌数据总条数
      brandName:[],
      brandIdArray: [], // 用于记录批量删除时选中的品牌 ID 数组
      dialogTitle: '',
      editDialogVisible: false, // 控制编辑品牌弹窗的显示隐藏
      editBrandQuery: {}, // 编辑品牌时的临时数据对象
      brandSearchQuery: {}, // 存储品牌搜索表单中的数据（包含选择的品牌 ID 和类型等）
      brandOptions: [], // 品牌下拉框的选项数据（根据实际查询结果填充）
      brandTypeOptions: [] // 品牌类型下拉框的选项数据（根据实际查询结果填充）

    }

  },
  mounted() {
    this.loadBrandList(1); // 页面加载时，加载第一页品牌列表数据
  },
  methods: {
    // 切换分页时加载对应页的品牌列表数据
    toPage(current) {
      this.loadBrandList(current);
    },
    // 处理品牌列表中选中行变化时的事件，记录选中的品牌 ID
    handleSelectionChange(brandItemArray) {
      this.brandIdArray = [];
      brandItemArray.forEach((brand) => {
        this.brandIdArray.push(brand.id);
      })
    },
    // 加载品牌列表数据的方法，根据传入的页码参数获取对应页数据
    loadBrandList(current) {
      doGet("/admin/brand?method=findAll", {
        current: current
      }).then((resp) => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.brandList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },
    // 删除单个品牌的方法，弹出确认框后，根据品牌 ID 发送删除请求到后端
    delBrand(id) {
      messageConfirm("是否删除该品牌？").then(() => {
        doDelete("/admin/brand/" + id).then((resp) => {
          if (resp.data.code === 200) {
            messageTip("删除成功!", "success");
            this.reload();
          }
        })
      })
    },
    // 批量删除品牌的方法，将选中的品牌 ID 数组拼接成字符串发送到后端进行批量删除
    batchDel() {
      if (this.brandIdArray.length === 0) {
        messageTip('请先选择要批量删除的品牌', 'warning');
        return;
      }
      let ids = this.brandIdArray.join(",");
      doGet("/admin/brand?method=deleteByIds", {
        ids: ids
      }).then((resp) => {
        if (resp.data.code === 200) {
          messageTip("批量删除成功", "success");
          this.reload();
        }
      });
    },
    // 点击添加品牌按钮，清空 brandQuery 并打开添加品牌弹窗
    addView() {
      this.brandQuery = {};
      this.dialogVisible = true;
    },
    // 执行添加品牌的方法，直接发送 POST 请求到后端添加品牌接口（原先是先验证再发送，现在去除验证逻辑）
    addBrandSubmit() {
      doPost("/admin/brand/save", this.brandQuery).then((resp) => {
        if (resp.data.code === 200) {
          this.dialogVisible = false;
          messageTip("添加成功", "success");
          this.reload();
        } else {
          messageTip("添加失败", "error");
        }
      });
    },
    // 根据品牌 ID 查询品牌详情，将查询到的数据绑定到 brandQuery 并打开详情弹窗
    view(id) {
      doGet("/admin/brand/" + id).then((resp) => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.brandQuery = resp.data.data;
          this.dialogVisible = true;
        }
      })
    },
    // 根据品牌 ID 查询品牌数据用于编辑，将数据绑定到 editBrandQuery 并打开编辑弹窗
    editView(id) {
      doGet("/admin/brand/" + id).then((resp) => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.editBrandQuery = resp.data.data;
          this.editDialogVisible = true;
        }
      })
    },
    // 执行编辑品牌提交的方法，直接发送 POST 请求到后端更新品牌接口（原先是先验证再发送，现在去除验证逻辑）
    editBrandSubmit() {
      doPut("/admin/brand", this.editBrandQuery).then((resp) => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.editDialogVisible = false;
          messageTip("修改成功！", "success");
          this.reload();
        }
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res.data)
      this.brandQuery.brandImg = res.data
      this.editBrandQuery.brandImg = res.data

    },
    // 加载品牌下拉框的选项数据（根据实际需求查询所有品牌或部分品牌数据用于下拉框展示）
    loadBrandOptions() {
      doGet("/admin/brand?method=findAll", {current: "1"}).then((resp) => {
        console.log(resp.data.data.list);
        if (resp.data.code === 200) {
          this.brandOptions = resp.data.data.list;
        }
      })
    },
    // 加载品牌类型下拉框的选项数据（根据实际业务从后端获取品牌类型数据）
    // loadBrandTypeOptions() {
    //   doGet("/brand?method=findAllBrandTypes", {}) // 这里假设后端有个专门获取品牌类型的接口，可根据实际调整
    //       .then((resp) => {
    //         console.log(resp.data.data);
    //         if (resp.data.code === 200) {
    //           this.brandTypeOptions = resp.data.data;
    //         }
    //       });
    // },
    // // 品牌搜索功能，根据选择的品牌 ID 和类型等条件查询品牌列表数据
    // onSearch() {
    //   console.log(this.brandSearchQuery.brandId);
    //   console.log(this.brandSearchQuery.brandType);
    //   doGet("/brand?method=searchByCondition", { // 这里假设后端有个按条件搜索品牌的接口，名称可根据实际调整
    //     brandId: this.brandSearchQuery.brandId,
    //     brandType: this.brandSearchQuery.brandType
    //   }).then((resp) => {
    //     console.log(resp);
    //     if (resp.data.code === 200) {
    //       this.brandList = resp.data.data;
    //       this.reload();
    //     }
    //   })
  },
  // 重置品牌搜索表单数据，清空选择的品牌 ID 和类型等条件
  onReset() {
//     this.brandSearchQuery = {};
  },
}
</script>

<style scoped>
.brandList {
  width: auto;
  height: auto;
  background-color: #ffffff;
}

.detail {
  background-color: #f5f7fa;
  width: 100%;
  padding-left: 15px;
}

.brand-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
</style>